Angular Material একটি আধুনিক এবং ব্যবহারকারী-বান্ধব UI লাইব্রেরি, যা ডেভেলপারদের জন্য প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। তবে, কখনো কখনো আপনি Angular Material এর ডিফল্ট কম্পোনেন্টের স্টাইল বা বৈশিষ্ট্য কাস্টমাইজ করতে চাইবেন, যেমন রঙ, ফন্ট, আকার ইত্যাদি। Angular Material এর কম্পোনেন্ট কাস্টমাইজ করার অনেক উপায় আছে এবং এটি Angular's theming system এবং CSS/SCSS এর মাধ্যমে করা যায়।

এখানে কিছু জনপ্রিয় Angular Material কম্পোনেন্ট কাস্টমাইজ করার উপায় আলোচনা করা হলো।

১. Angular Material থিমিং সিস্টেম ব্যবহার করা

Angular Material এর থিমিং সিস্টেমের মাধ্যমে আপনি সহজেই পুরো অ্যাপ্লিকেশনের স্টাইল কাস্টমাইজ করতে পারেন। Angular Material থিমিং সিস্টেমে প্রধান রং (Primary), হাইলাইট রং (Accent) এবং ত্রুটি রং (Warn) কাস্টমাইজ করা যায়।

কাস্টম থিম তৈরি করা

আপনার অ্যাপ্লিকেশনের জন্য কাস্টম থিম তৈরি করতে SCSS ফাইল ব্যবহার করতে হবে।

@import '~@angular/material/theming';

// কাস্টম রঙের প্যালেট তৈরি করা
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

// থিম তৈরি করা
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  )
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($theme);

এটি Angular Material এর ডিফল্ট কম্পোনেন্টগুলোর স্টাইলকে কাস্টম রঙে রূপান্তরিত করবে।

২. CSS বা SCSS দিয়ে কম্পোনেন্ট কাস্টমাইজ করা

Angular Material এর কম্পোনেন্টগুলি CSS বা SCSS দিয়ে কাস্টমাইজ করা সম্ভব। আপনি টেবিল, বাটন, ইনপুট ফিল্ড, ডায়লগ ইত্যাদি কম্পোনেন্টের স্টাইল পরিবর্তন করতে পারেন।

উদাহরণ: Material Button কাস্টমাইজ করা

MatButton কম্পোনেন্টটি কাস্টমাইজ করতে, আপনি CSS বা SCSS ব্যবহার করতে পারেন:

::ng-deep .mat-button {
  background-color: #4caf50;   /* গ্রিন ব্যাকগ্রাউন্ড */
  color: white;                 /* সাদা টেক্সট */
  border-radius: 8px;           /* গোলাকার কোণ */
  padding: 10px 20px;           /* প্যাডিং */
}

::ng-deep .mat-button:hover {
  background-color: #45a049;   /* হোভার ইফেক্ট */
}

এখানে, ::ng-deep এর মাধ্যমে আপনি Angular Material কম্পোনেন্টের স্টাইল কাস্টমাইজ করছেন। (এটি ব্যবহারকারীর স্টাইল শীট প্রভাবিত করার জন্য ব্যবহৃত হয়।)

৩. কাস্টম আইকন এবং সাইজ কাস্টমাইজেশন

MatIcon কম্পোনেন্টটি কাস্টম আইকন এবং সাইজ কাস্টমাইজ করার জন্য অত্যন্ত সহজ। আপনি font-size, color, background-color এবং অন্যান্য CSS প্রপার্টি ব্যবহার করে আইকনের আকার এবং রঙ পরিবর্তন করতে পারেন।

উদাহরণ: Material Icon কাস্টমাইজ করা

<mat-icon style="font-size: 40px; color: #ff4081;">home</mat-icon>

এখানে, font-size এবং color CSS প্রপার্টি ব্যবহার করে আইকনটির আকার এবং রঙ কাস্টমাইজ করা হয়েছে।

৪. Material Input কাস্টমাইজ করা

Angular Material এর MatInput কম্পোনেন্টটি কাস্টমাইজ করার জন্য, আপনি ইনপুটের আকার, রঙ, বর্ডার এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।

উদাহরণ: Material Input কাস্টমাইজ করা

<mat-form-field appearance="outline">
  <mat-label>Enter your name</mat-label>
  <input matInput placeholder="John Doe">
</mat-form-field>

এখানে, appearance="outline" দিয়ে ইনপুট ফিল্ডের স্টাইল পরিবর্তন করা হয়েছে। এছাড়াও, MatLabel এবং MatInput এর স্টাইল পরিবর্তন করা যেতে পারে।

SCSS দিয়ে কাস্টমাইজেশন:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  border-color: #ff4081; /* বর্ডার রঙ কাস্টমাইজ করা */
}

::ng-deep .mat-input-element {
  font-size: 16px; /* ইনপুট ফন্ট সাইজ কাস্টমাইজ করা */
}

৫. Material Dialog কাস্টমাইজ করা

MatDialog কম্পোনেন্টটি কাস্টমাইজ করতে হলে, আপনি Dialog এর স্টাইল এবং ভিউ পরিবর্তন করতে পারেন।

উদাহরণ: Material Dialog কাস্টমাইজ করা

import { MatDialog } from '@angular/material/dialog';
import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
})
export class DialogComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogContentComponent, {
      width: '400px',
      height: '300px',
      panelClass: 'custom-dialog-container'
    });
  }
}

::ng-deep .custom-dialog-container {
  background-color: #4caf50;   /* কাস্টম ব্যাকগ্রাউন্ড রঙ */
  color: white;                 /* সাদা টেক্সট */
  border-radius: 10px;          /* গোলাকার কোণ */
}

এখানে, panelClass ব্যবহার করে আপনি ডায়ালগের কাস্টম ক্লাস যোগ করেছেন এবং SCSS দিয়ে ডায়ালগের স্টাইল পরিবর্তন করেছেন।

৬. Material Table কাস্টমাইজ করা

MatTable কম্পোনেন্টে বিভিন্ন কাস্টমাইজেশন করা যায়, যেমন কলাম সাইজ, প্যাডিং, ফন্ট সাইজ ইত্যাদি।

উদাহরণ: Material Table কাস্টমাইজ করা

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Age</th>
    <td mat-cell *matCellDef="let element">{{element.age}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

SCSS দিয়ে কাস্টমাইজেশন:

::ng-deep .mat-header-cell, .mat-cell {
  font-size: 16px;        /* টেবিলের ফন্ট সাইজ পরিবর্তন */
  padding: 12px 24px;     /* টেবিলের প্যাডিং কাস্টমাইজ */
}

::ng-deep .mat-sort-header-container {
  color: #ff4081;        /* কলামের সোর্টিং আইকনের রঙ পরিবর্তন */
}

Angular Material এর কম্পোনেন্ট কাস্টমাইজ করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনটিকে আরও ইউজার-ফ্রেন্ডলি এবং ব্র্যান্ডিংয়ের সাথে মানানসই করে তুলতে পারেন। Theming, CSS/SCSS কাস্টমাইজেশন, এবং Angular's styling API ব্যবহার করে আপনি অ্যাপ্লিকেশনের প্রতিটি অংশের ডিজাইন এবং অনুভূতি পরিবর্তন করতে পারবেন।